/**
    经营概况页面头部4个框
 */
<template>
    <div style="width:1100px">
        <div style="width:1100px">
            <span style="font-weight:800">基本信息预览</span>
            <hr>
        </div>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <div style="margin-left:15px;">
                        <span style="font-size:60px">{{ alldata.countDailyRegistration }}</span><br>
                        <span style="font-weight:800">今日挂号人次</span><br><br>
                        <i id="no1" class="el-icon-top" style="color:rgb(255,99,99);font-size:20px"></i>
                        <span>{{ this.computeresult.p_reg}}</span>
                        <i class="el-icon-s-order" style="position:relative;left:10px;top:-50px;font-size:50px;color:rgb(255,99,99)"></i>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <div style="margin-left:15px;">
                        <span style="font-size:60px">{{ alldata.countDailyReception }}</span><br>
                        <span style="font-weight:800">今日接诊人次</span><br><br>
                        <i id="no2" class="el-icon-top" style="color:rgb(40,208,148);font-size:20px"></i>
                        <span>{{ this.computeresult.p_rec}}</span>
                        <i class="el-icon-s-custom" style="position:relative;left:10px;top:-50px;font-size:50px;color:rgb(40,208,148)"></i>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <div style="margin-left:15px;">
                        <span style="font-size:60px">{{ alldata.countDailyPatient }}</span><br>
                        <span style="font-weight:800">今日新增患者</span><br><br>
                        <i id="no3" class="el-icon-top" style="color:rgb(255,199,28);font-size:20px"></i>
                        <span>{{ this.computeresult.p_pat}}</span>
                        <i class="el-icon-circle-plus" style="position:relative;left:10px;top:-50px;font-size:50px;color:rgb(255,199,28)"></i>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <div style="margin-left:15px;">
                        <span style="font-size:60px">{{ incomeList.length ? incomeList[0].sumfee : 0 }}</span><br>
                        <span style="font-weight:800">今日收入合计</span><br><br>
                        <i id="no4" class="el-icon-top" style="color:rgb(103,111,232);font-size:20px"></i>
                        <span>{{ this.computeresult.p_inc}}</span>
                        <i class="el-icon-s-goods" style="position:relative;left:10px;top:-50px;font-size:50px;color:rgb(103,111,232)"></i>
                    </div>
                    
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import axios from "axios";
export default {
    data(){
        return{
            incomeList:[],
            outpatient: {
                createTimeFront: "",
                createTimeBack: "",
            },
            outpatient1: {
                createTimeFront: "",
                createTimeBack: "",
            },
            alldata:{
                //今日挂号数量
                countDailyRegistration:"",
                yesterdayCountDailyRegistration:"",
                //今日接诊数量
                countDailyReception:"",
                yesterdayCountDailyReception:"",
                //今日挂号数量
                countDailyPatient:"",
                yesterdayCountDailyPatient:"",
            },
            computeresult:{
                p_reg:"",
                p_rec:"",
                p_pat:"",
                p_inc:""
            }
        }
    },
    methods:{
        //查询页面所需所有信息
        getAllInfo(){
        //查询今天挂号数量
        // getDailyRegistration(){
            this.outpatient.createTimeFront = this.getToday().daySart;
            this.outpatient.createTimeBack = this.getToday().dayEnd;
            // console.log("this.getToday().daySart",this.getToday().daySart);
            // console.log("this.getToday().dayEnd",this.getToday().dayEnd);
            // 发送请求,查询所有的诊断日志
            axios.post("/api/outpatient/findDailyRegistration", this.outpatient)
            .then((res) => {
                this.alldata.countDailyRegistration = res.data.data;
                // console.log("今天挂号数量",res.data.data);
            })
            .catch((err) =>{
                this.$message.error('请求错误,请联系我们的管理员~~~')
            });
        // },
        //  //查询昨天挂号数量
        // getYesterdayRegistration(){
            this.outpatient1.createTimeFront = this.getYesterday().daySart1;
            this.outpatient1.createTimeBack = this.getYesterday().dayEnd1;
            // console.log("this.getYesterday().daySart1",this.getYesterday().daySart1);
            // console.log("this.getYesterday().dayEnd1",this.getYesterday().dayEnd1);
            
            // 发送请求,查询所有的诊断日志
            axios.post("/api/outpatient/findDailyRegistration", this.outpatient1)
            .then((res) => {
                this.alldata.yesterdayCountDailyRegistration = res.data.data;
                // console.log("昨天挂号数量",res.data.data);
            })
            .catch((err) =>{
                this.$message.error('请求错误,请联系我们的管理员~~~')
            });

        // },
        // //查询今天段接诊数量
        // getDailyReception(){
            axios.post("/api/outpatient/findDailyReception", this.outpatient)
            .then((res) => {
                this.alldata.countDailyReception = res.data.data;
                // console.log("今天接诊数量",res.data.data);
            })
            .catch((err) =>{
                this.$message.error('请求错误,请联系我们的管理员~~~')
            });
        // },
        //  //查询昨天段接诊数量
        // getYesterdayReception(){
            axios.post("/api/outpatient/findDailyReception", this.outpatient1)
            .then((res) => {
                this.alldata.yesterdayCountDailyReception = res.data.data;
                // console.log("昨天接诊数量",res.data.data);
            })
            .catch((err) =>{
                this.$message.error('请求错误,请联系我们的管理员~~~')
            });
        // },
        // //查询今天新增患者数量
        // getDailyPatient(){
            axios.post("/api/outpatient/findDailyPatient", this.outpatient)
            .then((res) => {
                this.alldata.countDailyPatient = res.data.data;
                // console.log("今天新增患者数量",res.data.data);
            })
            .catch((err) =>{
                this.$message.error('请求错误,请联系我们的管理员~~~')
            });

        // },
        // //查询昨天新增患者数量
        // getYesterdayPatient(){
            axios.post("/api/outpatient/findDailyPatient", this.outpatient1)
            .then((res) => {
                this.alldata.yesterdayCountDailyPatient = res.data.data;
                // console.log("昨天新增患者数量",res.data.data);
            })
            .catch((err) =>{
                this.$message.error('请求错误,请联系我们的管理员~~~')
            });
                
        // },
        // //查询时间段内收入情况
        // getDailyIncome(){
            axios("/api/income/findMonthIncome")
            .then((res) => {
                this.incomeList = res.data.data;
                this.computeInfo(); 
            })
            .catch((err) =>{
                this.$message.error('请求错误,请联系我们的管理员~~~')
            });
            //最后计算页面所需要的信息
            
        },
        //计算各部分增长情况
        computeInfo(){
            let regi;
            let recp;
            let pati;
            let inco;
            //判断分母是否为0
            if(this.alldata.yesterdayCountDailyRegistration ==0){
                regi = this.alldata.countDailyRegistration;
            }
            else{
                regi = (this.alldata.countDailyRegistration - this.alldata.yesterdayCountDailyRegistration) / this.alldata.yesterdayCountDailyRegistration;
            }

            if(this.alldata.yesterdayCountDailyReception == 0){
                recp = this.alldata.countDailyReception;
            }
            else{
                recp = (this.alldata.countDailyReception - this.alldata.yesterdayCountDailyReception) / this.alldata.yesterdayCountDailyReception;
            }

            if(this.alldata.yesterdayCountDailyPatient ==0){
                pati = this.alldata.countDailyPatient;
            }
            else{
                pati = (this.alldata.countDailyPatient - this.alldata.yesterdayCountDailyPatient) / this.alldata.yesterdayCountDailyPatient;
            }
            //计算今天 和昨天的收入情况
            if (this.incomeList[1].sumfee == 0) {

                inco = this.incomeList[0].sumfee;
            }else{
                inco =  (this.incomeList[0].sumfee - this.incomeList[1].sumfee) / this.incomeList[1].sumfee;
            }

            //将结果转为带百分号的字符串
            let p_regi = this.toPercent(regi);
            let p_recp = this.toPercent(recp);
            let p_pati = this.toPercent(pati);
            let p_inco = this.toPercent(inco);

            // console.log(typeof regi );
            // console.log("p_regi",p_regi);
            // console.log("p_recp",p_recp);
            // console.log("p_pati",p_pati);
            // console.log("p_inco",p_inco);
            
            //判断上涨还是下降
            if( regi >= 0){
                this.computeresult.p_reg = "较昨日上涨"+p_regi;
            }else{
                this.computeresult.p_reg = "较昨日下降"+p_regi;
                document.getElementById("no1").setAttribute("class","el-icon-bottom");
            }

            if( recp >= 0){
                this.computeresult.p_rec = "较昨日上涨"+p_recp;
            }else{
                this.computeresult.p_rec = "较昨日下降"+p_recp;
                document.getElementById("no2").setAttribute("class","el-icon-bottom");
            }

            if( pati >= 0){
                this.computeresult.p_pat = "较昨日上涨"+p_pati;
            }else{
                this.computeresult.p_pat = "较昨日下降"+p_pati;
                document.getElementById("no3").setAttribute("class","el-icon-bottom");
            }

            if (inco >= 0) {
                this.computeresult.p_inc = "较昨日上涨"+p_inco;
            } else {
                this.computeresult.p_inc = "较昨日下降"+p_inco;
                document.getElementById("no4").setAttribute("class","el-icon-bottom");
            }
        },
        //转百分比
        toPercent(point){
            if (point==0) {
                return 0;
            }
            var str=Number(point*100).toFixed();
            str+="%";
            return str;
        },
        //辅助方法
        //1 获取今天的24小时
        getToday(){
            // 今天的0时 - 24时
            let daySart = new Date();
            daySart.setHours(0);
            daySart.setMinutes(0);
            daySart.setSeconds(0);
            let dayEnd = new Date();
            dayEnd.setHours(23);
            dayEnd.setMinutes(59);
            dayEnd.setSeconds(59);
            // console.log(daySart);
            // console.log(dayEnd);
            return{
                daySart,dayEnd
            }
        },
        //2 获取昨天的24小时
        getYesterday(){
            let daySart1 = new Date();
            daySart1.setDate(daySart1.getDate() - 1);
            daySart1.setHours(0);
            daySart1.setMinutes(0);
            daySart1.setSeconds(0);
            let dayEnd1 = new Date();
            dayEnd1.setDate(dayEnd1.getDate()-1);
            dayEnd1.setHours(23);
            dayEnd1.setMinutes(59);
            dayEnd1.setSeconds(59);
            // console.log(daySart1);
            // console.log(dayEnd1);

            return{
                daySart1,dayEnd1
            }
        },
        //获取最近一周 7*24小时
        getLastWeek(){
        },
        //获取近一个月的7*24小时
        getLastMonth(){
        }
    },
    components:{
    },
    created(){
        this.getAllInfo();
    },
}
</script>
<style scoped>
    .el-row {
        margin-bottom: 40px;
        margin-top: 40px;
        
    }
    .el-col {
        border-radius: 4px;
        
    }
    .grid-content {
        border-radius: 4px;
        min-height: 180px;
        max-height: 180px;
        max-width: 250px;
        min-width: 250px;
        border: 1px solid darkgray;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>